<ui:composition template="/market/templateCliente.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"> 
    
<!-- 	<h:head>
        <style type="text/css">
			.ui-growl-title {
			    font: 11px "Abel", Monaco, monospace;
			    text-align: center;
			}
			.ui-growl-message p {
			    font: 10px "Abel", Monaco, monospace;
			    letter-spacing: -1px;
			}       
        </style>
	</h:head>
	 -->
	<ui:define name="proveedorRegistro">
	
		<p:growl id="mensajes" showDetail="true" life="2000" />	

		<div class="well">
		
			<h:form enctype="multipart/form-data" id="form" styleClass="form-horizontal">
					
				<fieldset>
				
				<legend>Registro de Proveedor</legend>
	
															
				<p:growl id="mensajes" showDetail="false" life="2000" sticky="true" autoUpdate="true"/>
	
				<div class="form-group">
					<h:outputLabel value="Foto " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8 row-lg-3">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>					
							<p:fileUpload fileUploadListener="#{utilsBean.subirImagen}" allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" update="mensajes" sizeLimit="10000000" auto="true" multiple="false" styleClass="btn-group"/>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<h:outputLabel value="QR " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
							<p:inputText label="QR" value="#{proveedorBean.qr}" placeholder="QR" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>

				<div class="form-group">
					<h:outputLabel value="Nick " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
							<p:inputText label="Nick" value="#{proveedorBean.nick}" placeholder="Nick" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Nombre Completo" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>					
							<p:inputText label="Nombre Completo" value="#{proveedorBean.nomCompleto}" placeholder="Nombre Completo" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Apellidos" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>					
							<p:inputText label="Apellidos" value="#{proveedorBean.apellido}" placeholder="Apellidos" styleClass="form-control"></p:inputText>
						</div>
					</div>
				</div>
					
				<div class="form-group">
					<h:outputLabel value="eMail" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>					
							<p:inputText label="eMail" value="#{proveedorBean.mail}" placeholder="eMail" styleClass="form-control"></p:inputText>
						</div>					
					</div>
				</div>
	
				<div class="form-group">		            
			  		<h:outputLabel value="Contraseña " styleClass="control-label col-lg-2"/>			  		
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<p:password value="#{proveedorBean.password}" required="true" placeholder="Contraseña" 
									styleClass="form-control" label="Contraseña" validatorMessage="Verifique la contrasena ingresada">
							<f:validateRegex pattern="((?=.*\d)(?=.*[A-Z])(?=.*[@#$%-]).{8,})" />
							</p:password>
						</div>
						<div style="font-size:10px; text-align:right;"><h:outputLabel>Recuerde: Requiere un minimo de 8 caracteres, al menos 1 digito, 1 letra mayuscula y un caracter @#$%-</h:outputLabel></div>						
					</div>
					

					
				</div>
	
				<div class="form-group">
			        <h:outputLabel value="Fecha de Nacimiento " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>			        
							<p:calendar value="#{proveedorBean.fechaNto}" pattern="dd/MM/yyyy"
										required="true" placeholder="Fecha de Nacimiento" 
										styleClass="form-control" label="Fecha de Nacimiento">
							</p:calendar>
						</div>  
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Movil" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
							<p:inputText label="Movil" value="#{proveedorBean.movil}" placeholder="Movil" styleClass="form-control"></p:inputText>
						</div>					
					</div>
				</div>
				
				<div class="form-group">
					<h:outputLabel value="Sexo" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
							<h:selectOneMenu label="Sexo" id="sexo" value="#{proveedorBean.sexo}" effect="fade" styleClass="form-control">
								<f:selectItem itemLabel="Femenino" itemValue="F" />
					            <f:selectItem itemLabel="Masculino" itemValue="M" />
					        </h:selectOneMenu>
				        </div>
					</div>
				</div>
					
				<div class="form-group" style="text-align:center; margin: auto;">				
					<br />
					
					<a href="#{request.contextPath}/index.xhtml" style="margin: 20px;"><button class="btn btn-default">Cancelar</button></a>
			             
		         	<h:commandLink id="regButton" value="Registrar" update="mensajes"
			             actionListener="#{proveedorBean.postRegistroProveedor}"
			             styleClass="btn btn-primary" style="margin: 20px;"/>
				</div>

				</fieldset>		             
			
			</h:form>
		</div>
	
	</ui:define>

</ui:composition>
